<template>
  <div>
    <Row class="banner">
      <h1>党政要闻情况</h1>
      <h2>贵阳市消防支队党政要闻媒体分析</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="8">
        <Card :style="{'margin-bottom':'12px'}">
          <p slot="title">
            <span>党政要闻热词词云</span>
          </p>
          <div class="chart" id="chart-news-wordcloud"></div>
          <Spin v-show="loading.newsWordcloud" fix size="large"></Spin>
        </Card>
        <Card>
          <p slot="title">
            <span>党政要闻热词排名情况</span>
          </p>
          <div class="chart" id="chart-news-ranking"></div>
          <Spin v-show="loading.newsRanking" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <p slot="title">
            <span>党政要闻一览表</span>
          </p>
          <ul class="toolbar" slot="extra">
            <li class="item">
              <span class="text">按时间筛选</span>
              <Date-picker
                type="datetimerange"
                size="default"
                style="width:320px"
                @on-change="handleSelectedDate"
                placeholder="选择日期和时间"
              ></Date-picker>
            </li>
            <li class="item">
              <Input
                :search="true"
                enter-button="立即搜索"
                @on-search="renderTable(0)"
                size="default"
                v-model="keyword"
                placeholder="请输入新闻标题搜索"
              ></Input>
            </li>
          </ul>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page :total="pageCount" :page-size="15" show-elevator @on-change="renderTable"></Page>
          <Spin v-if="loading.table" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      loading: {
        newsWordcloud: false,
        newsRanking: false,
        table: false
      },
      option: {
        newsWordcloud: null,
        newsRanking: null
      },
      startTime: this.dateShift(-365) + " 00:00:00",
      endTime: this.dateShift(0) + " 23:59:59",
      keyword: null,
      pageCount: 0,
      tableData: [],
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "operation",
          align: "center",
          width: 160,
          render(h, params) {
            return h(
              "a",
              {
                attrs: {
                  href: params.row.newsLink,
                  target:'_blank'
                }
              },
              "点击浏览"
            );
          }
        },
        {
          title: "新闻标题",
          key: "newsTitle",
          align: "center"
        },
        {
          title: "发布时间",
          key: "newsPubdate",
          align: "center"
        },
        {
          title: "浏览次数",
          key: "newsHeatCount",
          align: "center",
          width: 120
        }
      ]
    };
  },
  methods: {
    renderChart_WordCloud() {
      this.loading.newsWordcloud = true;
      var data = {
        value: [],
        value2: [],
        image:
          ""
      };
      var maskImage = new Image();
      maskImage.src = data.image;
      var $this = this;
      this.option.newsWordcloud = {
        backgroundColor: "#fff",
        tooltip: {
          show: false
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 1,
            sizeRange: [12, 65],
            rotationRange: [0, 0],
            // shape: "circle",
            maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    Math.round(1 * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 0) +
                    ")"
                  );
                }
              }
            },
            left: "center",
            top: "-160",
            right: null,
            bottom: null,
            width: 700,
            height: 700,
            // top: 20,
            data: data.value
          }
        ]
      };

      maskImage.onload = function() {
        axios.get($this.URLHEAD_TA + "CiYun").then(res => {
          data.value = res.data.Data;
          for (let i = 0; i < 8; i++) {
            data.value2[i] = res.data.Data[i];
          }
          $this.option.newsWordcloud.series[0].data = data.value;
          $this.$Crender("chart-news-wordcloud", $this.option.newsWordcloud);
          $this.loading.newsWordcloud = false;
        });
      };
    },
    renderChart_Ranking() {
      this.loading.newsRanking = true;
      this.option.newsRanking = {
        tooltip: { show: true, trigger: "axis", formatter: "{a}:{b}\n{c}" },
        grid: {
          top: 25,
          left: 25,
          right: 25,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "category",
          data: [],
          axisLine: { show: true },
          axisTick: { show: true },
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333305" } }
        },
        series: [
          {
            type: "bar",
            name: "热词访问量",
            data: [],
            barWidth: "35%",
            itemStyle: {
              barBorderRadius: [0, 8, 8, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: this.COLORS[2] },
                  { offset: 1, color: this.COLORS[1] }
                ]
              }
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter(val){
                    return val.value + '次'
                }
              }
            }
          }
        ]
      };
      axios.get(this.URLHEAD_TA + "CiYun").then(res => {
        let json = res.data;
        let arr = json.Data.slice(0,10).reverse()
        this.option.newsRanking.yAxis.data = arr.map(o => {
          return o.name;
        });
        this.option.newsRanking.series[0].data = arr;
        this.$Crender("chart-news-ranking", this.option.newsRanking);
        this.loading.newsRanking = false
      });
    },
    renderTable(index) {
      this.loading.table = true;
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        pageIndex: index,
        pageSize: 15,
        title:this.keyword
      };
      axios
        .get(this.URLHEAD_TA + "DZJS_DZYWMTSJFX", { params: params })
        .then(res => {
          let json = res.data;
          this.tableData = json.Data.map((o, i) => {
            return {
              index: i + 1,
              newsTitle: o.title,
              newsLink: `http://xf.58xiao.com/NewsCon/d?id=${o.detailsID}`,
              newsPubdate: o.releaseTime,
              newsHeatCount: o.previewNumber
            };
          });
          this.pageCount = json.count;
          this.loading.table = false;
        });
    },
    handleSelectedDate(daterange) {
      this.startTime = daterange[0];
      this.endTime = daterange[1];
    }
  },
  mounted() {
    this.renderChart_WordCloud();
    this.renderChart_Ranking();
    this.renderTable(0);
  }
};
</script>

<style lang="" scoped>
.chart {
  height: 450px;
}
</style>